<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="css/2.css">
    <script src="vue-router.js"></script>
</head>

<body>
    <div id="app">
        <div v-bind:class="{head}">
            <img src="images/Logo.jpg" v-bind:class="{img}">
            <h3 v-bind:style="{position: position,left: left}">
                {{ msg }}
            </h3>
            <p style="position: absolute;left: 25%;top: 5%;">
                Operation of University Internal Powers Datebase
            </p>
            <p style="position: absolute;right: 8px;top: 0;">
                会员登录|注册|收藏
            </p>
            <p style="position: absolute;right: 230px;top: 45px;">
            </p>
        </div>
        <div v-bind:class="{select}">
            <a href="index.html" style="position: relative;left: 17%;color: aliceblue;text-decoration: none;top: 6px;">
                首页
            </a>
            <a href=" " style="position: relative;left: 22%;color: aliceblue;text-decoration: none;top: 6px;">
                学术动态
            </a>
            <a href="3.html" style="position: relative;left: 27%;color: aliceblue;text-decoration: none;top: 6px;">
                文献库
            </a>
            <a href=" " style="position: relative;left: 32%;color: aliceblue;text-decoration: none;top: 6px;">
                文件库
            </a>
            <a href=" " style="position: relative;left: 37%;color: aliceblue;text-decoration: none;top: 6px;">
                案例库
            </a>
            <a href=" " style="position: relative;left: 42%;color: aliceblue;text-decoration: none;top: 6px;">
                关于我们
            </a>
            <a href=" " style="position: relative;left: 47%;color: aliceblue;text-decoration: none;top: 6px;">
                联系我们
            </a>
            <input type="text" placeholder="搜索框" v-on:keyup.enter="submit"
                style="position: relative;left: 56%;top: 3px;">
            <button @click="search" value="搜索"
                style="position: relative;left: 57%;width: 50px;height: 20px;font-size: 12px;top: 4px;">
                查找
            </button>
        </div>
        <div v-bind:class="{left}">
            <div :class="{title1}">
                <p style="position: relative;left: 60px;top: 8px;">
                    文献库
                </p>
            </div>
            <ul :class="{menu}">
                <p>国内文献</p>
                <hr style="width: 70%;margin-left: -5%;">

                <ul><a
                        href="https://www.tsinghua.edu.cn/kxyj/xsjl.htm">学术论文</a>
                </ul>
                <hr style="width: 70%;margin-left: 5%;">

                <router-link to="/a" tag="li">学术专著</router-link>

                <hr style="width: 70%;margin-left: 5%;">

                <li><a href="index.html">国外文献库</a></li>
                <hr style="width: 70%;margin-left: -5%;">
            </ul>
            <div class="title2">
                <p style="position: relative;left: 50px;top: 80px;background-color: rgb(63, 57, 57);
            color: aliceblue;width: 180px;height: 30px;">
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp联系我们
                </p>
                <br>
                <br>
                <br>
                <p style="font-size: small;">&nbsp&nbsp&nbspxxxx大学高等教育研究学院</p>
                <p style="font-size: small;">&nbsp&nbsp&nbsp高校内部权力制约与监督机制研究课题组</p>
                <p style="font-size: small;">&nbsp&nbsp&nbsp电子邮箱：ih@xxxx.edu.cn</p>
                <p style="font-size: small;">&nbsp&nbsp&nbsp电话：0111-85707273</p>
            </div>
        </div>
        <div :class="{center}">
            <p style="margin-left: 70%;color: aliceblue;">您的位置：首页<文献库<国内文献<学术专著 &nbsp</p> </div> <div class="item">
                    <p style="margin-left: 25%;">关键词</p>
                    <input type="text" style="position: absolute;left: 30%;top: 18px;border: 1px solid green;">
                    <p style="position: absolute;left: 45%;top: 3px">发表时间</p>
                    <input type="text" style="position: absolute;left: 53%;top: 18px;border: 1px solid green;">
                    <input type="text" style="position: absolute;left: 70%;top: 18px;border: 1px solid green;">
                    <button style="position: absolute;left: 83%;top: 18px">搜索</button>
        </div>
        <div :class="{right}">

            <router-view></router-view>

        </div>
        <div :class="{bottom}">

        </div>
    </div>

    <template id="a-tmp">
        <div>
            <router-link to="/a/de">中共中央印发《中国共产党巡视工作条例》</router-link>
            <hr style="border : 1px dashed rgb(20, 20, 24);">
            <!-- <router-view name="com2"></router-view> -->
            <router-link to="/a/go">这群年轻人再次擦亮北京志愿者“金名片”</router-link>
            <hr style="border : 1px dashed rgb(20, 20, 24);">
            <!-- <router-view name="com3"></router-view> -->
        </div>
    </template>

    <template id="de-tmp">
        <div>
        <h2 style="text-align: center;">清华大学：2002-2011级出国校友中已有超半数回国工作</h2>
        <p style="text-align: right;">来源：中国青年报客户端 发布时间：2021-09 </p>
        　        9月6日，清华大学2021级研究生开学典礼、全校研究生开学第一课相继举行。清华大学校长邱勇在会上表示，从校友总会“清华人”小程序注册信息来看，截至2021年4月，2002-2011级出国（境）校友中已有超半数回国工作。众多优秀“海归”在各行各业大显身手，而这一比例还在持续扩大中。
            “大学不能脱离她所在的土壤而发展，大学是国家的大学。”邱勇在开学第一课上强调。 据统计，过去10年，清华大学毕业生出国（境）深造占比约14.2%，其中超过65%的毕业生到世界排名前50位大学深造。邱勇表示，在这个开放交流的时代，清华毕业生们传承着前辈爱国奉献的光荣传统，放眼世界汲取知识的养分，更不忘学成归来、用实际行动为国家和人类事业发展作出自己的贡献。
       </div>
    </template>

    <template id="go-tmp">
        <h>今年的服贸会规模较往年有了进一步提升。2021年服贸会执委会办公室副主任、北京市商务局局长闫立刚介绍，2021年服贸会围绕“数字开启未来、服务促进发展”主题，举办了5场高峰论坛，200场论坛会议、推介洽谈和边会，吸引了来自153个国家和地区的1.2万余家企业线上线下参展参会。这也说明，志愿者要服务更多的展商、参会人员和观众。</h>
    </template>
    <script>
        var a = {
            template: '#a-tmp'
        }
        var de = {
            template: '#de-tmp'
        }
        var go = {
            template: '#go-tmp'
        }

        var router = new VueRouter({
            routes: [{
                    path: '/a',
                    component: a
                },
                {
                    path: '/a/de',
                    component: de
                },
                {
                    path: '/a/go',
                    component: go
                },
            ]
        })
        var vm = new Vue({
            el: '#app',
            router,
            data: {
                head: 'head',
                img: 'img',
                left: 'left',
                msg: '高校内部权力运行数据库',
                left: '25%',
                position: 'absolute',
                select: 'select',
                title1: 'title1',
                right: 'right',
                menu: 'menu',
                center: 'center',
                bottom: 'bottom',

            },
            methods: {
                submit: function () {
                    alert("没有相应查询")
                },
                search: function () {
                    alert("没有相应查询")
                }
            }
        })
    </script>
</body>

</html>